<template>
  <user-add
    v-if="add.visible.value"
    v-model:show="add.visible.value"
    @refresh-table="initTable"
  ></user-add>
  <user-update
    v-if="update.visible.value"
    v-model:show="update.visible.value"
    :user-detail="UserDetail"
    @refresh-table="initTable"
  ></user-update>

  <user-search @search-user="searchUser"></user-search>
  <!-- 表格 -->
  <cv-table
    v-model:current-page="table.pageConfig.page"
    :stripe="true"
    :height="h * 0.5"
    :page-config="table.pageConfig"
    :data="table.pageConfig.list"
    :config="tableColumn"
    :loading="table.loading.value"
    @add-data="openAddUserDialogHandle"
    @refresh="initTable"
    @current-change="initTable"
  >
  </cv-table>
</template>
<script setup lang="ts">
//表格配置文件类型
import type { TableConfig } from '@/packages/components'
//状态吗判断
import {
  addReq,
  queryReq,
  pageQueryReq,
  updateReq,
  deleteReq,
} from '@/utils/http/code'
//pinia
import { useAppStore, useUserSearch } from '@/store'
//通用hook
import useVisible from '@/hooks/useVisible' //弹窗显示隐藏
import { useTable } from '@/hooks' //表格操作
import userSearch from './user-search.vue'
//请求api
import {
  getRoleSelect,
  RoleSelectType,
  getUserList,
  getUserDetail,
  UserListType,
  DepTreeType,
  getDepTree,
  deleteUser,
  UpdateUserInfoType,
  UserDetailType,
} from '@/api/system/system-user'
import userAdd from './user-add.vue'
import userUpdate from './user-update.vue'
import { isEmpty } from 'lodash-es'
import { $bus } from '@/utils/common/mitt'

const emit = defineEmits([''])
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },
})

$bus.on('search-dep-user', async (val: any) => {
  const res = await getUserList({
    size: table.pageConfig.size,
    page: table.pageConfig.page,
    depName: val,
  })
  console.log(res, 'uuuuu')
  table.pageConfig.list = res.data.list
  table.pageConfig.total = res.data.total
})

/**
 * 搜索用户
 * @param name
 */
const searchUser = async (name: string) => {
  const res = await getUserList({
    size: table.pageConfig.size,
    page: table.pageConfig.page,
    username: name,
  })
  console.log(res, 'uuuuu')
  table.pageConfig.list = res.data.list
  table.pageConfig.total = res.data.total
}

const openAddUserDialogHandle = async () => {
  add.toggle()
  //getRidsAndDep(add)
}

//表格属性
const table = useTable()

const add = useVisible()
const update = useVisible()

const h = ref(1000)
h.value = window.innerHeight
onresize = () => {
  h.value = window.innerHeight
}

let UserDetail = reactive<UserDetailType>({
  id: '',
  username: '',
  avatar: '',
  nickname: '',
  state: 1,
  phone: '',
  depId: 0,
  depName: '',
  roleList: [],
  department: null,
  roIds: [],
})
const { permissionList } = useAppStore()
const tableColumn = reactive<TableConfig<UserListType>>({
  permissionList,
  columns: [
    {
      type: 'txt',
      prop: 'id',
      label: 'ID',
      fixed: 'left',
      width: 200,
    },
    {
      type: 'txt',
      prop: 'username',
      label: '用户名',
      width: 200,
    },
    {
      type: 'image',
      prop: 'avatar',
      label: '用户头像',
      width: 100,
    },
    {
      type: 'txt',
      prop: 'nickname',
      label: '用户名称',
      width: 100,
    },
    {
      type: 'txt',
      prop: 'phone',
      label: '手机号',
      width: 200,
    },
    {
      type: 'callback',
      prop: 'depName',
      label: '部门名称',
      width: 100,
      callback: (row) => {
        // 返回部门名称
        return row.depName
      },
    },
    {
      type: 'callback',
      prop: 'roleList',
      label: '角色',
      width: 200,
      callback: (row) => {
        // 返回角色名称
        return row.roleList.map((v) => v.roleName).join()
      },
    },
    {
      type: 'tag',
      prop: 'state',
      label: '状态',
      tag: [{ 1: ['success', '启用'], 0: ['danger', '禁用'] }],
    },
  ],
  action: [
    {
      type: 'edit',
      title: '编辑',
      auth: ['sys:role:update'],
      onClick: async (row) => {
        // 获取角色回填数据
        const res = await getUserDetail(row.id)
        // 判断请求是否成功
        queryReq(res, (data) => {
          console.log(res, 'hhhhh')
          UserDetail = data
          // 处理角色列表(转成数组格式)
          if (!isEmpty(UserDetail.roleList)) {
            UserDetail.roleList = UserDetail.roleList.map((v) => {
              return v.roleId
            }) as any
          }

          console.log(UserDetail, 'fffff')
          update.toggle()
        })
      },
    },

    {
      type: 'del',
      title: '删除',
      auth: ['sys:role:delete'],
      onClick: async (row) => {
        const res = await deleteUser(row.id)
        console.log(res, '删除用户')
        deleteReq(res, () => {
          initTable()
        })
      },
    },
  ],
})
/**
 * 定义筛选属性字段
 */
const filterData = reactive({
  categoryName: '',
})
/**
 * 加载表格数据
 */

const initTable = table.initTableData(async (c) => {
  const res = await getUserList({
    ...c.page,
  })
  c.setPageData(res)
})

initTable()
</script>
<style lang="scss" scoped></style>
